﻿@{
    ViewData["Title"] = "EntityPurchaseUpd";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<br />
<br />
<button id="updRowBtn" class="layui-btn" style="background-color:red;border-radius:5px">修改</button>

<table id="dataTable" class="layui-table">
    <thead>
        <tr>
            <th style="width:180px">批次/耳号</th>
            <th style="width:180px">栋舍</th>
            <th style="width:180px">转入栏位</th>
            <th style="width:100px">性别</th>
            <th style="width:100px">商品名称</th>
            <th style="width:100px">标包</th>
            <th style="width:150px">计量单位</th>
            <th style="width:150px">入库数量</th>
            <th style="width:150px">只均单价</th>
            <th style="width:150px">金额（元）</th>
            <th style="width:150px">单位折扣（元）</th>
            <th style="width:150px">调整金额（元）</th>
            <th style="width:150px">结算金额（元）</th>
            <th style="width:150px">总重量（公斤）</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="select-wrapper">
                    <select name="earNnumber" id="earNnumber" lay-filter="earNnumber" lay-verify="required">
                        <option value="">请选择耳号</option>
                    </select>
                </div>

                <input type="hidden" name="purId" id="purId">
            </td>

            <td>
                <input type="text" name="cottageName" id="cottageName" disabled lay-verify="required" autocomplete="off" class="layui-input" style="width:120px">
            </td>
            <td>
                <input type="text" name="fieldName" id="fieldName" disabled lay-verify="required" autocomplete="off" class="layui-input" style="width:120px">
            </td>

            <td>
                <div class="select-wrapper">
                    <select name="purSex" id="purSex" lay-verify="required">
                        <option value=0>母</option>
                        <option value=1>公</option>
                    </select>
                </div>
            </td>

            <td><input type="text" name="goodName"       id="goodName"        lay-verify="required" autocomplete="off" class="layui-input" style="width:120px"></td>
            <td><input type="text" name="package"        id="package"         lay-verify="required" autocomplete="off" class="layui-input" style="width:100px"></td>
            <td><input type="text" name="measuringUnit"  id="measuringUnit"   lay-verify="required" autocomplete="off" class="layui-input" style="width:100px"></td>
            <td><input type="text" name="quantityNumber" id="quantityNumber"  lay-verify="required" autocomplete="off" class="layui-input" style="width:100px"></td>
            <td><input type="text" name="averagePrice"   id="averagePrice"    lay-verify="required" autocomplete="off" class="layui-input" style="width:100px"></td>
            <td><input type="text" name="price"          id="price"           lay-verify="required" autocomplete="off" class="layui-input" style="width:100px"></td>
            <td><input type="text" name="priceDiscount"  id="priceDiscount"   lay-verify="required" autocomplete="off" class="layui-input" style="width:100px"></td>
            <td><input type="text" name="priceAdjust"    id="priceAdjust"     lay-verify="required" autocomplete="off" class="layui-input" style="width:100px"></td>
            <td><input type="text" name="pricePay"       id="pricePay"        lay-verify="required" autocomplete="off" class="layui-input" style="width:100px"></td>
            <td><input type="text" name="totalWeight"    id="totalWeight"     lay-verify="required" autocomplete="off" class="layui-input" style="width:100px"></td>
        </tr>
    </tbody>
</table>


<script>

    var $ = layui.jquery;

    $(function () {
        setTimeout(function () {
            FielCostesInfo()

        }, 100)
    })

    var Id = location.search.substring(2).split("=")[1];

    console.log(Id);

    function FielCostesInfo() {
        $.get("http://10.31.60.18:8000/AuthorizationGetRout/api/DepartmentShow/EntityPurchFindId?PurId=" + Id, function (res) {
            console.log(res);
            $("#purId").val(res.purId);
            $("#earNnumber").val(res.earbugles);
            $("#cottageName").val(res.cottageName);
            $("#fieldName").val(res.fieldName);
            $("#purSex").val(res.purSex? 1: 0);
            $("#goodName").val(res.goodName);
            $("#package").val(res.package);
            $("#measuringUnit").val(res.measuringUnit);
            $("#quantityNumber").val(res.quantityNumber);
            $("#averagePrice").val(res.averagePrice);
            $("#price").val(res.price);
            $("#priceDiscount").val(res.priceDiscount);
            $("#priceAdjust").val(res.priceAdjust);
            $("#pricePay").val(res.pricePay);
            $("#totalWeight").val(res.totalWeight);

            //sheepState: $("#sheepState").val() == "true" ? true : false,
        })
    }


    layui.use(['table', 'jquery', 'layer'], function () {
        //绑定耳号
        $(document).ready(function () {
            $.ajax({
                url: 'http://10.31.60.18:8000/ArchivesGetRout/api/Archives/ArchivesAllInfo',
                type: 'get',
                dataType: 'json',
                success: function (res) {
                    var enumData = res; // 直接使用返回的数据
                    var select = $('#earNnumber');
                    $.each(enumData, function (index, item) {
                        // 使用正确的字段添加选项到下拉框中
                        var option = $('<option>').val(item.earNnumber).text(item.earNnumber);
                        select.append(option);
                    });
                    // 手动触发 layui 组件的渲染
                    layui.form.render('select');
                },
                error: function () {
                    // 处理 AJAX 请求失败的情况
                    console.error('Failed to fetch data for dropdown.');
                }
            });
        });

        //绑定栋舍
        var data = [];
        $(document).ready(function () {
            $.ajax({
                url: 'http://10.31.60.18:8000/AuthorizationGetRout/api/Cottage/CootList',
                type: 'get',
                dataType: 'json',
                success: function (res) {
                    data = res; // 直接使用返回的数据
                    var select = $('#buildings');
                    $.each(data, function (index, item) {
                        // 使用正确的字段添加选项到下拉框中
                        var option = $('<option>').val(item.name).text(item.name);
                        select.append(option);
                    });
                    // 手动触发 layui 组件的渲染
                    layui.form.render('select');
                },
                error: function () {
                    // 处理 AJAX 请求失败的情况
                    console.error('Failed to fetch data for dropdown.');
                }
            });
        });
        // 栋舍栏位二级联动
        $('#buildings').change(function () {
            var name = $("#buildings").val();
            var id = 0;
            $.each(data, function (index, item) {
                if (name == item.name) {
                    id = item.id;
                }
            });
            //监听到了下拉框选择的选项，传递过来
            $.get({
                url: 'http://10.31.60.18:8000/AuthorizationGetRout/api/Cottage/FieidList', // 后端枚举数据接口地址
                data: {
                    id: id
                },
                dataType: "json",
                success: function (res) {
                    $("#columns").empty();
                    var option = '<option value=" ">' + "请选择栏位" + '</option>';
                    $("#columns").append(option);
                    $.each(res, function (index, item) {
                        // 使用正确的字段添加选项到下拉框中
                        var option = $('<option>').val(item.name).text(item.name);
                        $('#columns ').append(option);
                    });
                    // 手动触发 layui 组件的渲染
                    layui.form.render('select');
                },
                error: function () {
                    // 处理 AJAX 请求失败的情况
                    console.error('Failed to fetch data for dropdown.');
                }
            });
        });

      
        //修改
        $('#updRowBtn').on('click', function () {
            var form = {
                purId: $("#purId").val(),
                earbugles: $("#earNnumber").val() == "" ? null : $("#earNnumber").val(),
                cottageName: $("#cottageName").val() == "" ? null : $("#cottageName").val(),
                fieldName: $("#fieldName").val() == "" ? null : $("#fieldName").val(),
                purSex: $("#purSex").val() == "" ? null : $("#purSex").val(),
                goodName: $("#goodName").val() == "" ? null : $("#goodName").val(),
                package: $("#package").val() == "" ? null : $("#package").val(),
                measuringUnit: $("#measuringUnit").val() == "" ? null : $("#measuringUnit").val(),
                quantityNumber: $("#quantityNumber").val() == "" ? null : $("#quantityNumber").val(),
                averagePrice: $("#averagePrice").val() == "" ? null : $("#averagePrice").val(),
                price: $("#price").val() == "" ? null : $("#price").val(),
                priceDiscount: $("#priceDiscount").val() == "" ? null : $("#priceDiscount").val(),
                priceAdjust: $("#priceAdjust").val() == "" ? null : $("#priceAdjust").val(),
                pricePay: $("#pricePay").val() == "" ? null : $("#pricePay").val(),
                totalWeight: $("#totalWeight").val() == "" ? null : $("#totalWeight").val(),
            }

            console.log(form)

            $.ajax({
                type: 'PUT',
                url: 'http://10.31.60.18:8000/AuthorizationSetRout/api/EntityPurchase/EntityPurchaseUpd', // 根据实际情况修改ControllerName和ActionName
                data: JSON.stringify(form),
                contentType: "application/json",
                success: function (res) {
                    if (res>0) {
                        layer.msg('修改成功', { icon: 1 }, function () {
                            location.href = '/EntityPurchase/ShowEntityPurchase'
                        });
                    } else {
                        layer.alert('修改失败', {
                            icon: 1,
                            shadeClose: true,
                        })
                    }
                },
                error: function (xhr, status, error) {
                    // 处理错误响应
                    console.error(error);
                }
            });
        })
    });
</script>



<style>
    /* 为日期输入框添加样式 */
    input[type="date"] {
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: #f9f9f9;
        font-size: 14px;
        color: #333;
        width: 150px;
        /* 设置一个合适的宽度 */
    }
        /* 您可以根据需要添加其他样式 */
        input[type="date"]:focus {
            border-color: #007BFF;
            outline: none;
        }

    #dataTable {
        width: 100%; /* Ensure table takes full width of its container */
        max-width: 100%; /* Restrict table width to 100% of parent container */
        overflow-x: auto; /* Enable horizontal scrolling */
    }
        /* Ensure table header cells match width of table cells in body */
        #dataTable thead th {
            white-space: nowrap; /* Prevent wrapping of header text */
        }

    /* 模拟layui的下拉框样式 */
    .select-wrapper {
        position: relative;
        display: inline-block;
        font-family: Arial, sans-serif;
        overflow: hidden;
        border: 1px solid #e6e6e6; /* 边框样式 */
        border-radius: 4px; /* 圆角 */
        background-color: #fff; /* 背景颜色 */
    }

        .select-wrapper select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            border: none;
            padding: 8px 10px;
            font-size: 14px;
            cursor: pointer;
            width: 200px;
            background: transparent; /* 透明背景 */
        }

        .select-wrapper::after {
            content: '\25BE'; /* 下三角形符号 */
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            pointer-events: none;
        }

        /* 根据选中状态改变样式 */
        .select-wrapper select:focus + ::after {
            color: #009688; /* 选中时的颜色 */
        }

</style>




